<template>
    <div class="range">
        <div class="rendering">{{i18n('list.fieldRender','字段渲染')}}</div>
        <div class="table-operator">
            <i class="iconfont iconjia " @click="addRow"></i>
            <i class="iconfont icontrash" @click="removeRow"></i>
            <i class="iconfont iconshang" @click="upRow"></i>
            <i class="iconfont iconxia" @click="downRow"></i>
        </div>
        <rx-grid ref="table"
                 :dataSource="fields"
                 :ellipsis="false"
                 :columns="columns"
                 :allowRowSelect="true"
                 :multiSelect="true"
                 :showPage="false"
                 borders="true"
                 class="rcgrid">
            <!--    范围表达式          -->
            <span slot="express_name" slot-scope="{text,record,index,blur}">
               <a-select
                   label-in-value
                   :default-value="{ key: record.express_value }"
                   style="width: 100px"
                   @change="handleChange($event,record)"
               >
             <a-select-option v-for="aselecvt in compare" :value="aselecvt.value">
               {{aselecvt.name}}
             </a-select-option>
             </a-select>
                <!--               express  范围表达-->
              <a-input style="width: 80px" class="aselect" :placeholder="record.express_value=='in'?i18n('geq','大于等于'):''" v-model="record.express_name" @change="inputchange(record)" />
              <a-input style="width: 80px" class="aselect" v-if="record.express_value=='in'"
                       :placeholder="record.express_value=='in'?i18n('leq','小于等于'):''"
                       v-model="record.express_name2" @change="input2change(record)" />
          </span>
            <span slot="name" slot-scope="{text,record,index,blur}">
            <a-input v-model="record.name" @blur="blur(index,'name',text,record)" />
          </span>
            <span slot="bgcolor" slot-scope="{text,record}">
                <a-input class="be_colour" type="color" v-model="record.bgcolor"/>
          </span>
            <span slot="frame" slot-scope="{text,record}">
                <a-input class="be_colour" type="color" v-model="record.frame"/>
          </span>
            <span slot="fgcolor" slot-scope="{text,record}">
               <a-input class="be_colour" type="color" v-model="record.fgcolor"/>
          </span>
            <span slot="effect" slot-scope="{text,record}" v-if="record.name!=''">
               <span class="effect" :style="{ color: record.fgcolor ,backgroundColor:record.bgcolor,border:'1px solid'+ record.frame}">{{record.name}}</span>
          </span>

        </rx-grid>
    </div>
</template>

<script>
    import {RxGrid} from "@lowcode/jpaas-common-lib";
    export default {
        name: "renderConfig_display_range",
        props:["layerid","destroy"],
        components:{
            RxGrid
        },
        data(){
            return {
                labelCol: { span:6 },
                wrapperCol: { span:18 },
                labelCol1: { span:3 },
                wrapperCol1: { span:19 },
                form: this.$form.createForm(this),
                mdl:{},
                fields:[],
                fieldDataType:'string',
                columns:[{title:this.$ti18('rxList.index', '序号'),width:70,dataIndex: 'index',type:'indexColumn',scopedSlots: {customRender: 'index'}},
                    {title:this.i18n('form.rangeExpress','范围表达式'),dataIndex: 'express_name',scopedSlots: {customRender: 'express_name'},width:300},
                    {title:this.i18n('form.tagName','标签名'),width:100,dataIndex: 'name',allowCellEdit:true,scopedSlots: {customRender: 'name'}},
                    {title:this.i18n('form.backgroundColor','背景颜色'),width:90,dataIndex: 'bgcolor', scopedSlots: {customRender: 'bgcolor'}},
                    {title:this.i18n('form.borderColor','边框颜色'),width:90,dataIndex: 'frame', scopedSlots: {customRender: 'frame'}},
                    {title:this.i18n('form.fontColor','字体颜色'),width:90,dataIndex: 'fgcolor',scopedSlots: {customRender: 'fgcolor'}},
                    {title:this.i18n('form.displayEff','展示效果'),dataIndex: 'effect',scopedSlots: {customRender: 'effect'}}
                ],
                value:'eq',//默认等于
                index:'',
                compare:[
                    {
                        value:'eq',
                        name:this.i18n('eq','等于')
                    },
                    {
                        value:'gt',
                        name:this.i18n('overtake','大于')
                    },
                    {
                        value:'ge',
                        name:this.i18n('geq','大于等于')
                    },
                    {
                        value:'lt',
                        name:this.i18n('under','小于')
                    },
                    {
                        value:'le',
                        name:this.i18n('leq','小于等于')
                    },
                    {
                        value:'in',
                        name:this.i18n('form.range','范围')
                    }
                ]
            }
        },
        computed:{
            table(){
                return this.$refs.table;
            },
        },
        methods:{
            i18n(name,text,key){
                return this.$ti18(name,text,"formCellRender",key);
            },
            handleChange(value,record) {
                if (value) {
                    record.express_value = value.key;
                    record.express =this.handlerExpressValue(record.express_value,record.express_name,record.express_name2);
                }
            },
            handlerNumber(express_name,flag){
                return (!flag || this.fieldDataType=='number')?express_name:'\"'+express_name+'\"';
            },
            handlerExpressValue(express_value,express_name,express_name2){
                var express='';
                if(express_value=='eq'){
                    express+='value=='+this.handlerNumber(express_name,true);
                }else if(express_value=='gt'){
                    express+='value>'+this.handlerNumber(express_name);
                }else if(express_value=='ge'){
                    express+='value>='+this.handlerNumber(express_name);
                }else if(express_value=='lt'){
                    express+='value<'+this.handlerNumber(express_name);
                }else if(express_value=='le'){
                    express+='value<='+this.handlerNumber(express_name);
                }else if(express_value=='in'){
                    express+='value>='+this.handlerNumber(express_name)+' && value<='+this.handlerNumber(express_name2);
                }
                return express;
            },
            inputchange(record){
                //默认是等于
                if(record.express_value){
                    record.express =this.handlerExpressValue(record.express_value,record.express_name,record.express_name2);
                }else {
                    record.express ='';
                }
            },
            input2change(record){
                //默认是等于
                if(record.express_value){
                    record.express =this.handlerExpressValue(record.express_value,record.express_name,record.express_name2);
                }
            },
            setData(data,fieldDts){
                if(data && data.colorConfigs){
                    this.fields=data.colorConfigs;
                }
                var fields=fieldDts.filter(item=>{return item.value==data.field && (item.key=='number' || item.key=='int')})
                if(fields.length>0){
                    this.fieldDataType='number';
                }
                this.mdl=data;
                this.form.setFieldsValue(this.mdl);
            },
            validate(callback){
                var self=this;
                this.form.validateFields((err, values) => {
                    if(err){
                        return;
                    }
                    self.mdl=values;
                    callback();
                });
            },
            getData(){
                this.mdl.colorConfigs=this.table.getData();
                return this.mdl;
            },
            changeData(e,field){
                this.mdl[field]=e.target.checked;
            },
            addRow(){
                this.table.addRow({express_value:'eq',bgcolor:'#1890ff',frame:'#1460a7',fgcolor:'#FFFFFF'});
            },
            removeRow(){
                this.table.removeRows();
            },
            upRow(){
                this.table.moveUp();
            },
            downRow(){
                this.table.moveDown();
            }
        }
    }
</script>

<style scoped>
    .table-operator{
        float: right;
    }
    .table-operator >i{
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        background-color: #f5f7fa;
        border: solid 1px #dadde0;
        border-left: none;
        display: block;
        float: left;
    }
    .table-operator >i:nth-child(1){
        border-left: solid 1px #dadde0;
        border-radius: 5px 0px 0px 5px;
    }
    .table-operator >i:nth-child(4){
        border-radius: 0px 5px 5px 0px;
    }
    .rendering{
        border-left: 3px solid #1890ff;
        height: 10px;
        line-height: 10px;
        padding-left: 5px;
        width: 100px;
        float: left;
        margin-top: 16px;
    }
    .aselect{
        width: calc(100% - 120px);
        margin-left: 10px;
    }
    .effect{
        padding: 3px 10px 3px 10px;
        border-radius: 5px;
    }
    .rcgrid{
        height: calc(100% - 50px);
    }
    .be_colour{
        width: 50px;
    }
    .range{
        height: 100%;
        padding: 20px;

    }
</style>